<template>
  <div class="case-timeline page-content">
    <!-- 顶部导航 -->
    <header class="bg-white shadow-sm sticky top-0 z-10">
      <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <h1 class="text-xl font-bold text-gray-800">案件进展</h1>
        <button @click="refreshTimeline" class="text-blue-600">
          <i class="fas fa-sync-alt"></i>
        </button>
      </div>
    </header>
    
    <!-- 案件基本信息 -->
    <div class="bg-white p-4 mb-4 mx-4 rounded-lg shadow-sm">
      <div class="case-info-header">
        <div class="case-basic">
          <h2 class="text-lg font-semibold text-gray-800">{{ caseInfo.caseNumber }}</h2>
          <p class="text-gray-600 mb-2">{{ caseInfo.caseType }}</p>
          <div class="case-details">
            <div class="detail-item">
              <span class="label">当事人:</span>
              <span class="value">{{ caseInfo.client }}</span>
            </div>
            <div class="detail-item">
              <span class="label">负责律师:</span>
              <span class="value">{{ caseInfo.lawyer }}</span>
            </div>
          </div>
        </div>
        <div class="case-status">
          <span class="px-3 py-1 rounded-full text-sm" 
                :class="getStatusClass(caseInfo.status)">
            {{ getStatusText(caseInfo.status) }}
          </span>
          <div class="case-dates mt-2 text-xs text-gray-500">
            <div>开始: {{ formatDate(caseInfo.startDate) }}</div>
            <div>预计结束: {{ formatDate(caseInfo.expectedEndDate) }}</div>
          </div>
          <!-- 案件完成后显示评价按钮 -->
          <div v-if="caseInfo.status === 'completed'" class="case-actions mt-3">
            <el-button 
              type="primary" 
              size="small" 
              @click="goToEvaluation"
              v-if="!hasEvaluated"
            >
              <i class="fas fa-star mr-1"></i>评价服务
            </el-button>
            <el-button 
              size="small" 
              @click="goToEvaluation"
              v-else
            >
              <i class="fas fa-eye mr-1"></i>查看评价
            </el-button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 时间轴 -->
    <div class="timeline-container px-4">
      <div class="timeline">
        <div v-for="(node, index) in timelineNodes" 
             :key="index" 
             class="timeline-node"
             :class="{ 'completed': node.completed, 'current': node.current }">
          
          <!-- 时间轴连接线 -->
          <div class="timeline-line" v-if="index < timelineNodes.length - 1"></div>
          
          <!-- 节点图标 -->
          <div class="timeline-icon">
            <i :class="getNodeIcon(node.type)" class="text-white"></i>
          </div>
          
          <!-- 节点内容 -->
          <div class="timeline-content">
            <div class="timeline-header">
              <div class="node-title-section">
                <h3 class="font-semibold text-gray-800">{{ node.title }}</h3>
                <div class="node-meta">
                  <span class="text-sm text-gray-500">{{ formatDate(node.date) }}</span>
                  <span class="text-sm text-blue-600 ml-2">负责人: {{ node.responsible }}</span>
                </div>
              </div>
              <div class="node-status">
                <span v-if="node.completed" class="status-badge completed">
                  <i class="fas fa-check mr-1"></i>已完成
                </span>
                <span v-else-if="node.current" class="status-badge current">
                  <i class="fas fa-clock mr-1"></i>等待 {{ getNodeWaitingAction(node) }}
                </span>
                <span v-else class="status-badge pending">
                  <i class="fas fa-hourglass-half mr-1"></i>待进行
                </span>
              </div>
            </div>
            
            <div class="timeline-description">
              <p class="text-gray-700">{{ node.description }}</p>
              
              <!-- 子节点 -->
              <div v-if="node.subNodes && node.subNodes.length > 0 && showSubNodes" 
                   class="sub-nodes mt-3">
                <h4 class="text-sm font-medium text-gray-700 mb-2">
                  <i class="fas fa-list-ul mr-1"></i>详细步骤
                </h4>
                <div v-for="(subNode, subIndex) in node.subNodes" 
                     :key="subIndex" 
                     class="sub-node">
                  <div class="sub-node-icon">
                    <i class="fas fa-check-circle text-green-500"></i>
                  </div>
                  <div class="sub-node-content">
                    <span class="text-sm text-gray-700">{{ subNode.title }}</span>
                    <span class="text-xs text-gray-500 block mt-1">{{ formatDate(subNode.date) }}</span>
                  </div>
                </div>
              </div>
              
              <!-- 附件 -->
              <div v-if="node.attachments && node.attachments.length > 0 && showAttachments" 
                   class="attachments mt-3">
                <h4 class="text-sm font-medium text-gray-700 mb-2">
                  <i class="fas fa-paperclip mr-1"></i>相关文件 ({{ node.attachments.length }}个)
                </h4>
                <div class="attachment-list">
                  <div v-for="(attachment, attIndex) in node.attachments" 
                       :key="attIndex" 
                       class="attachment-item"
                       @click="downloadAttachment(attachment)">
                    <div class="attachment-icon">
                      <i :class="getFileIcon(attachment.type)" class="text-blue-500"></i>
                    </div>
                    <div class="attachment-info">
                      <span class="text-sm font-medium text-gray-700">{{ attachment.name }}</span>
                      <span class="text-xs text-gray-500">{{ attachment.size }}</span>
                    </div>
                    <i class="fas fa-download text-gray-400 hover:text-blue-500 transition-colors"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 自定义时间轴设置 -->
    <div class="bg-white p-4 mt-4 mx-4 rounded-lg shadow-sm">
      <h3 class="font-semibold mb-3">显示设置</h3>
      <div class="space-y-2">
        <label class="flex items-center">
          <input type="checkbox" v-model="showSubNodes" class="mr-2">
          <span class="text-sm">显示详细子节点</span>
        </label>
        <label class="flex items-center">
          <input type="checkbox" v-model="showAttachments" class="mr-2">
          <span class="text-sm">显示相关文件</span>
        </label>
        <label class="flex items-center">
          <input type="checkbox" v-model="highlightImportant" class="mr-2">
          <span class="text-sm">突出重要信息</span>
        </label>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { caseApi } from '@/api/case'
import dayjs from 'dayjs'

export default {
  name: 'CaseTimeline',
  setup() {
    const route = useRoute()
    const router = useRouter()
    // 交通事故案件基本信息
    const caseInfo = ref({
      caseNumber: 'TA2024001789',
      caseType: '交通事故责任纠纷',
      status: 'completed', // 改为已完成状态以测试评价功能
      client: '张某某（受害人）',
      lawyer: '李卫民律师（交通事故专业）',
      startDate: '2024-01-15',
      expectedEndDate: '2024-04-15'
    })
    
    const hasEvaluated = ref(false) // 是否已评价
    
    // 交通事故案件处理时间轴
    const timelineNodes = ref([
      {
        id: 1,
        title: '交通事故发生',
        type: 'accident',
        date: '2024-01-15 14:30:00',
        completed: true,
        current: false,
        description: '浦东新区世纪大道与张杨路交叉口发生机动车追尾事故',
        responsible: '交警部门',
        subNodes: [
          { title: '事故现场报警', date: '2024-01-15 14:32:00' },
          { title: '120急救车到达', date: '2024-01-15 14:45:00' },
          { title: '交警现场勘查', date: '2024-01-15 15:00:00' },
          { title: '送医救治', date: '2024-01-15 15:20:00' }
        ],
        attachments: [
          { name: '现场照片.jpg', size: '3.2MB', type: 'image' },
          { name: '事故现场图.pdf', size: '1.8MB', type: 'pdf' },
          { name: '急救记录.pdf', size: '1.1MB', type: 'pdf' }
        ]
      },
      {
        id: 2,
        title: '医疗救治',
        type: 'medical',
        date: '2024-01-15 15:30:00',
        completed: true,
        current: false,
        description: '在上海第六人民医院进行全面检查和治疗，住院28天',
        responsible: '上海六院',
        subNodes: [
          { title: 'CT、MRI检查', date: '2024-01-15 16:00:00' },
          { title: '颈椎腰椎手术', date: '2024-01-16 09:00:00' },
          { title: '康复治疗', date: '2024-01-20 09:00:00' },
          { title: '出院', date: '2024-02-12 10:00:00' }
        ],
        attachments: [
          { name: '入院记录.pdf', size: '2.1MB', type: 'pdf' },
          { name: 'CT检查报告.pdf', size: '4.2MB', type: 'pdf' },
          { name: '手术记录.pdf', size: '3.5MB', type: 'pdf' },
          { name: '出院小结.pdf', size: '1.8MB', type: 'pdf' }
        ]
      },
      {
        id: 3,
        title: '交通事故认定',
        type: 'recognition',
        date: '2024-01-25 10:00:00',
        completed: true,
        current: false,
        description: '交警部门完成事故认定，确定责任划分',
        responsible: '浦东交警大队',
        subNodes: [
          { title: '现场勘查报告', date: '2024-01-20 16:00:00' },
          { title: '双方当事人询问', date: '2024-01-22 09:00:00' },
          { title: '事故认定书制作', date: '2024-01-25 10:00:00' }
        ],
        attachments: [
          { name: '道路交通事故认定书.pdf', size: '2.1MB', type: 'pdf' },
          { name: '事故现场勘查图.pdf', size: '3.2MB', type: 'pdf' }
        ]
      },
      {
        id: 4,
        title: '委托律师',
        type: 'lawyer',
        date: '2024-01-30 09:00:00',
        completed: true,
        current: false,
        description: '委托专业交通事故律师团队代理案件',
        responsible: '李卫民律师',
        subNodes: [
          { title: '律师事务所咨询', date: '2024-01-28 14:00:00' },
          { title: '委托合同签署', date: '2024-01-30 09:00:00' },
          { title: '案件材料移交', date: '2024-01-30 10:30:00' }
        ],
        attachments: [
          { name: '委托代理合同.pdf', size: '1.5MB', type: 'pdf' },
          { name: '律师执业证.jpg', size: '0.8MB', type: 'image' }
        ]
      },
      {
        id: 5,
        title: '保险理赔',
        type: 'insurance',
        date: '2024-02-05 14:00:00',
        completed: true,
        current: false,
        description: '与保险公司进行理赔协商',
        responsible: '中国人保 + 李律师',
        subNodes: [
          { title: '保险公司报案', date: '2024-01-16 09:00:00' },
          { title: '车辆定损评估', date: '2024-02-01 14:00:00' },
          { title: '初步理赔方案', date: '2024-02-05 16:00:00' }
        ],
        attachments: [
          { name: '车辆定损报告.pdf', size: '2.3MB', type: 'pdf' },
          { name: '理赔申请书.pdf', size: '1.1MB', type: 'pdf' }
        ]
      },
      {
        id: 6,
        title: '伤残鉴定',
        type: 'appraisal',
        date: '2024-02-16 09:00:00',
        completed: false,
        current: true,
        description: '委托司法鉴定机构进行伤残等级鉴定',
        responsible: '华东政法司法鉴定中心',
        subNodes: [
          { title: '鉴定机构选定', date: '2024-02-10 10:00:00' },
          { title: '鉴定预约确认', date: '2024-02-12 14:00:00' },
          { title: '鉴定检查（预约）', date: '2024-02-16 09:00:00' }
        ],
        attachments: [
          { name: '司法鉴定委托书.pdf', size: '1.3MB', type: 'pdf' }
        ]
      },
      {
        id: 7,
        title: '调解协商',
        type: 'mediation',
        date: '2024-03-01 14:00:00',
        completed: false,
        current: false,
        description: '根据鉴定结果与对方进行调解协商',
        responsible: '人民调解委员会',
        subNodes: [],
        attachments: []
      },
      {
        id: 8,
        title: '诉讼程序',
        type: 'litigation',
        date: '2024-03-15 10:00:00',
        completed: false,
        current: false,
        description: '调解不成功时向法院提起诉讼',
        responsible: '浦东新区法院',
        subNodes: [],
        attachments: []
      },
      {
        id: 9,
        title: '赔偿执行',
        type: 'execution',
        date: '2024-04-01 09:00:00',
        completed: false,
        current: false,
        description: '判决生效后执行赔偿',
        responsible: '法院执行局',
        subNodes: [],
        attachments: []
      }
    ])
    
    const showSubNodes = ref(true)
    const showAttachments = ref(true)
    const highlightImportant = ref(true)
    
    // 获取案件时间轴（模拟数据加载）
    const getTimeline = async () => {
      try {
        // 模拟API调用延迟
        await new Promise(resolve => setTimeout(resolve, 500))
        console.log('案件进度数据加载完成')
      } catch (error) {
        console.error('获取时间轴失败:', error)
      }
    }
    
    // 刷新时间轴
    const refreshTimeline = () => {
      getTimeline()
    }
    
    // 获取状态样式类
    const getStatusClass = (status) => {
      const statusMap = {
        'pending': 'bg-yellow-100 text-yellow-800',
        'in-progress': 'bg-blue-100 text-blue-800',
        'completed': 'bg-green-100 text-green-800',
        'closed': 'bg-gray-100 text-gray-800'
      }
      return statusMap[status] || 'bg-gray-100 text-gray-800'
    }
    
    // 获取状态文本
    const getStatusText = (status) => {
      const statusMap = {
        'pending': '待启动',
        'in-progress': '待伤残鉴定',  // 根据当前节点动态显示
        'completed': '已完成',
        'closed': '已结案'
      }
      return statusMap[status] || '未知'
    }
    
    // 获取交通事故节点图标
    const getNodeIcon = (type) => {
      const iconMap = {
        'accident': 'fas fa-car-crash',
        'medical': 'fas fa-hospital',
        'recognition': 'fas fa-clipboard-check',
        'lawyer': 'fas fa-user-tie',
        'insurance': 'fas fa-shield-alt',
        'appraisal': 'fas fa-stethoscope',
        'evidence': 'fas fa-search',
        'litigation': 'fas fa-gavel',
        'mediation': 'fas fa-handshake',
        'judgment': 'fas fa-stamp',
        'execution': 'fas fa-check-circle'
      }
      return iconMap[type] || 'fas fa-circle'
    }
    
    // 格式化日期
    const formatDate = (date) => {
      return dayjs(date).format('YYYY-MM-DD HH:mm')
    }
    
    // 获取文件图标
    const getFileIcon = (type) => {
      const iconMap = {
        'pdf': 'fas fa-file-pdf',
        'image': 'fas fa-file-image',
        'doc': 'fas fa-file-word',
        'excel': 'fas fa-file-excel',
        'video': 'fas fa-file-video',
        'audio': 'fas fa-file-audio'
      }
      return iconMap[type] || 'fas fa-file-alt'
    }
    
    // 下载附件
    const downloadAttachment = (attachment) => {
      // 实现文件下载逻辑
      console.log('下载文件:', attachment)
      // 这里可以调用实际的文件下载API
      alert(`正在下载文件: ${attachment.name}`)
    }
    
    // 跳转到评价页面
    const goToEvaluation = () => {
      router.push(`/client/case-evaluation/${caseInfo.value.caseNumber}`)
    }
    
    // 获取节点等待的动作
    const getNodeWaitingAction = (node) => {
      const waitingActions = {
        '交通事故发生': '现场处理完成',
        '医疗救治': '治疗结果确认',
        '交通事故认定': '责任认定书',
        '委托律师': '案件材料审核',
        '保险理赔': '理赔方案确认',
        '伤残鉴定': '司法鉴定结果',
        '调解协商': '调解方案确认',
        '诉讼程序': '法院受理确认',
        '赔偿执行': '执行完成确认'
      }
      return waitingActions[node.title] || '相关部门处理'
    }

    onMounted(() => {
      getTimeline()
    })
    
    return {
      caseInfo,
      hasEvaluated,
      timelineNodes,
      showSubNodes,
      showAttachments,
      highlightImportant,
      refreshTimeline,
      getStatusClass,
      getStatusText,
      getNodeIcon,
      getFileIcon,
      formatDate,
      downloadAttachment,
      goToEvaluation,
      getNodeWaitingAction
    }
  }
}
</script>

<style scoped>
.timeline-container {
  padding: 0 16px;
}

.timeline {
  position: relative;
  padding: 20px 0;
}

.timeline-node {
  position: relative;
  display: flex;
  margin-bottom: 30px;
}

.timeline-line {
  position: absolute;
  left: 20px;
  top: 40px;
  width: 2px;
  height: calc(100% + 10px);
  background-color: #e5e7eb;
  z-index: 1;
}

.timeline-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #9ca3af;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  z-index: 2;
  position: relative;
}

.timeline-node.completed .timeline-icon {
  background-color: #10b981;
}

.timeline-node.current .timeline-icon {
  background-color: #3b82f6;
}

.timeline-content {
  flex: 1;
  background-color: white;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.sub-nodes {
  border-left: 2px solid #e5e7eb;
  padding-left: 16px;
}

.sub-node {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.sub-node-icon {
  margin-right: 8px;
}

.sub-node-content {
  display: flex;
  flex-direction: column;
}

.attachments {
  border-top: 1px solid #e5e7eb;
  padding-top: 12px;
}

.attachment-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.attachment-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 4px;
  background-color: #f9fafb;
  cursor: pointer;
  transition: background-color 0.2s;
}

.attachment-item:hover {
  background-color: #f3f4f6;
}

/* 新增样式 */
.case-info-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.case-basic {
  flex: 1;
}

.case-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-item {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.detail-item .label {
  font-weight: 500;
  color: #6b7280;
  margin-right: 8px;
  min-width: 80px;
}

.detail-item .value {
  color: #1f2937;
}

.case-status {
  text-align: right;
  min-width: 150px;
}

.case-dates {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.node-title-section {
  flex: 1;
}

.node-meta {
  display: flex;
  align-items: center;
  margin-top: 4px;
}

.node-status {
  margin-left: 16px;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.completed {
  background-color: #dcfce7;
  color: #166534;
}

.status-badge.current {
  background-color: #dbeafe;
  color: #1d4ed8;
}

.status-badge.pending {
  background-color: #fef3c7;
  color: #92400e;
}

.sub-nodes {
  background-color: #f8fafc;
  border-left: 3px solid #e2e8f0;
  padding: 12px 16px;
  border-radius: 6px;
}

.sub-node {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
  padding: 8px;
  background-color: white;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
}

.sub-node:last-child {
  margin-bottom: 0;
}

.sub-node-icon {
  margin-right: 12px;
  margin-top: 2px;
}

.sub-node-content {
  flex: 1;
}

.attachments {
  background-color: #f8fafc;
  border-top: 1px solid #e5e7eb;
  padding: 12px;
  border-radius: 6px;
  margin-top: 12px;
}

.attachment-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.attachment-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  background-color: white;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid #e5e7eb;
}

.attachment-item:hover {
  background-color: #f0f9ff;
  border-color: #3b82f6;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.attachment-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #eff6ff;
  border-radius: 6px;
  flex-shrink: 0;
}

.attachment-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.timeline-node.current .timeline-content {
  border: 2px solid #3b82f6;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.timeline-node.completed .timeline-line {
  background-color: #10b981;
}

/* 响应式优化 */
@media (max-width: 768px) {
  .case-info-header {
    flex-direction: column;
    gap: 16px;
  }
  
  .case-status {
    text-align: left;
    min-width: auto;
  }
  
  .timeline-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .node-status {
    margin-left: 0;
  }
  
  .node-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}
</style> 